<template>
  <div class="knowledge-manager">
    <KnowledgeList 
      @create="handleCreate"
      @refresh="refreshKnowledgeStats"
    />
    
    <KnowledgeForm
      :visible="dialogVisible"
      @update:visible="dialogVisible = $event"
      @success="handleCreateSuccess"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getKnowledgeList } from '../../api/knowledge'
import KnowledgeList from './KnowledgeList.vue'
import KnowledgeForm from './KnowledgeForm.vue'

// 状态管理
const dialogVisible = ref(false)
const knowledgeTotal = ref(0)

// 页面初始化
onMounted(() => {
  refreshKnowledgeStats()
})

// 创建知识条目
const handleCreate = () => {
  dialogVisible.value = true
}

// 创建成功处理
const handleCreateSuccess = () => {
  refreshKnowledgeStats()
}

// 刷新知识库统计
const refreshKnowledgeStats = async () => {
  try {
    const res = await getKnowledgeList(1, 1)
    if (res.data) {
      knowledgeTotal.value = res.data.total
    }
  } catch (error) {
    console.error('Failed to fetch knowledge total:', error)
  }
}
</script>

<style scoped lang="scss">
.knowledge-manager {
  width: 100%;
}
</style> 